{% block sw_media_folder_content %}
<div class="sw-media-folder-content">
    {% block sw_media_folder_content_folder_listing %}
    <ul
        v-if="subFolders.length > 0 || parentFolder !== null"
        class="sw-media-folder-content__folder-listing"
    >
        {% block sw_media_folder_content_list_item %}

        <li
            v-if="parentFolder !== null"
            class="sw-media-folder-content__list-item"
        >
            <button
                class="sw-media-folder-content__button sw-media-folder-content__parent-folder"
                @click="emitInput(parentFolder)"
            >
                {% block sw_media_folder_content_folder_icon %}
                <img
                    :src="assetFilter('/administration/administration/static/img/media/folder--back--breadcrumb.svg')"
                    class="sw-media-folder-content__folder-icon"
                    alt="Folder thumbnail"
                >
                {% endblock %}

                {{ parentFolder.name }}
            </button>
        </li>

        <li
            v-for="(folder, index) in subFolders"
            :key="folder.id"
            :class="[{'is--selected': folder.id === selectedId}, 'sw-media-folder-content__list-item--' + index ]"
            class="sw-media-folder-content__list-item"
            role="button"
            tabindex="0"
            @click="emitInput(folder)"
            @keydown.enter="emitInput(folder)"
        >

            {% block sw_media_folder_content_button_folder %}
            {% block sw_media_folder_content_button_folder_button %}
            <button class="sw-media-folder-content__button sw-media-folder-content__folder-button">
                {% block sw_media_folder_content_folder_button_icon %}
                <img
                    :src="assetFilter('/administration/administration/static/img/media/folder-thumbnail.svg')"
                    class="sw-media-folder-content__folder-icon"
                    alt="Folder thumbnail"
                >
                {% endblock %}
                {{ folder.name }}
            </button>
            {% endblock %}
            {% block sw_media_folder_content_switch_button %}
            <mt-icon
                v-if="getChildCount(folder) > 0"
                class="sw-media-folder-content__switch-button"
                name="regular-chevron-right-xxs"
                size="12px"
            />
            {% endblock %}
            {% endblock %}
        </li>
        {% endblock %}
    </ul>
    {% endblock %}
</div>
{% endblock %}
